<template>
	<div class="demo-expense-container">
		<FlowableModel ref="flowableModelRef"
			:model="formData" 
			:modelKey="formData.modelKey" 
			businessKey="id" 
			flowNameKey="title" 
			callbackId="expenseCallback"
			callbackType="TypeScriptFunction"
			viewKey="tagview"
			@form-save="onFormSave" 
			@form-edit="onFormEdit" 
			@form-close="onFormClose"
			@tab-click="onTabClick">
			<!-- 自定义按钮 -->
			<template #button>
				<el-button size="small" icon="el-icon-plus" type="warning" class="ml10">自定义按钮</el-button>
			</template>
			<!-- 自定义表单 -->
			<template #form>
				<el-form ref="addExpenseFormRef" :model="formData" :rules="formRules" size="small" label-width="80px">
					<el-row :gutter="35">
						<el-col class="mb20">
							<el-form-item label="报销主题" prop="title">
								<el-input v-model="formData.title" placeholder="请输入费用报销主题" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col class="mb20">
							<el-form-item label="报销金额" prop="money">
								<el-input-number v-model="formData.money" placeholder="请输入费用报销金额" style="width: 200px;" clearable></el-input-number>
							</el-form-item>
						</el-col>
						<el-col class="mb20">
							<el-form-item label="报销清单" prop="content">
								<el-input type="textarea" :rows="5" v-model="formData.content" placeholder="请输入费用报销清单" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col class="mb20">
							<el-form-item label="备注" prop="remark">
								<el-input type="textarea" :rows="5" v-model="formData.remark" placeholder="请输入备注" clearable></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</template>
			<!-- 自定义标签页 -->
			<template #tabs>
				<el-tab-pane label="自定义标签页1" name="mytabs1">
					<div class="block" style="text-align: center;padding: 15px;">
						自定义标签页1
					</div>
				</el-tab-pane>
				<el-tab-pane label="自定义标签页2" name="mytabs2">
					<div class="block" style="text-align: center;padding: 15px;">
						自定义标签页2
					</div>
				</el-tab-pane>
			</template>
			
		</FlowableModel>
	</div>
</template>

<script lang="ts">
import { ref, toRefs, reactive, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import { addExpense, editExpense, getExpense } from '/@/api/demo/expense/index';
import FlowableModel from '/@/components/flowable/index.vue';
export default {
	name: 'expense/view',
	components: { FlowableModel },
	setup() {
		const flowableModelRef = ref();
		const addExpenseFormRef = ref();
		const route = useRoute();
		const state = reactive({
			formData: {
				modelKey: 'travel-expense-manager-level-process',
			},
			formRules : {
				title: { required: true, message: '报销主题不能为空', trigger: 'blur' },
				money: { required: true, message: '报销金额不能为空', trigger: 'blur' },
				content: { required: true, message: '报销清单不能为空', trigger: 'blur' }
			},
		});
		// 加载业务数据
		const loadExpense = (id: string) => {
			if(id){
				getExpense({id : id}).then((res) => {
					if(res.code == 0){
						Object.assign(state.formData, res.data);
					}
				});
			}
		};
		// 保存
		const onFormSave = () => {
			addExpenseFormRef.value.validate(valid => {
				if(valid){
					let params = {
						title: state.formData.title,
						money: state.formData.money,
						content: state.formData.content,
						remark: state.formData.remark,
						modelKey: state.formData.modelKey,
					}
					addExpense(params).then((res) => {
						if(res.code === 0){
							ElMessage.success('保存成功');
							Object.assign(state.formData, res.data);
							//启动流程实例
							flowableModelRef.value.onActFlowStart(res.data);
						}
					});
				}
			});
		}
		//修改
		const onFormEdit = () => {
			addExpenseFormRef.value.validate(valid => {
				if(valid){
					let params = {
						id: state.formData.id,
						title: state.formData.title,
						money: state.formData.money,
						content: state.formData.content,
						remark: state.formData.remark,
						modelKey: state.formData.modelKey,
					}
					editExpense(params).then((res) => {
						if(res.code === 0){
							ElMessage.success('保存成功');
							Object.assign(state.formData, res.data);
						}
					});
				}
			});
		}
		// 关闭
		const onFormClose = () =>{
			//关闭页面时回调函数
		}
		// 点击选项卡时
		const onTabClick = (tab) =>{
			console.info(tab);
		}
		// 页面加载时
		onMounted(() => {
			loadExpense(route.query.id);
		});
		return {
			flowableModelRef,
			addExpenseFormRef,
			onFormSave,
			onFormEdit,
			onFormClose,
			onTabClick,
			...toRefs(state),
		};
	}
};
</script>